import React from 'react';
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'

function TodoListUI(props) {
  return (
    <div style={{ margin: '10px' }}>
        <div>
          <Input
            style={{ width: '250px', marginRight: '10px' }}
            placeholder="写点什么..."
            value={props.inputValue}
            onChange={props.changeInputValue}
          />
          <Button
            type="primary"
            onClick={props.addItem}
          >
            添加</Button>
        </div>

        <div style={{ width: '300px', marginTop: '10px' }}>
          <List
            bordered
            dataSource={props.list}
            renderItem={(item, index) => (
              <List.Item onClick={() => { props.deleteItem(index) }} >{item}</List.Item>
            )}
          />
        </div>
      </div>
  )
}


export default TodoListUI